<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>高校人力资源管理</title>
    <script type="text/javascript" src="public/js/UserManager/login/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="public/js/UserManager/login/login.js"></script>
    <script type="text/javascript" src="public/js/UserManager/login/md5.js"></script>
    <link rel="stylesheet" href="public/css/font-awesome.min.css">
    <link rel="stylesheet" href="public/css/AdminLTE.min.css">
    <link href="public/css/UserManager/login2.css" rel="stylesheet" type="text/css"/>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!--<link rel="stylesheet" href="public/css/bootstrap.min.css">-->
    <!--<link rel="stylesheet" href="public/css/font-awesome.min.css">-->
    <!--<link rel="stylesheet" href="public/css/AdminLTE.min.css">-->
    <!--&lt;!&ndash; AdminLTE Skins. Choose a skin from the css/skins-->
    <!--folder instead of downloading all of them to reduce the load. &ndash;&gt;-->
    <!--<link rel="stylesheet" href="public/css/all-skins.min.css">-->
    <!--<link rel="stylesheet" href="public/css/main.css">-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<h1>人力资源管理系统<sup></sup></h1>
<div id="rrapp">
    <div class="login" style="margin-top:50px;">

        <div class="header">
            <div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);"
                                               tabindex="7">用户登录</a>
                <a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8">用户注册</a>
                <div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
            </div>
        </div>

        <div class="web_qr_login" id="web_qr_login" style="display: block; height: 420px;">

            <!--登录-->
            <div class="web_login web_login2" id="web_login">

                <div v-if="error" class="" style="width: 250px;margin-left: 65px">
                    <h4 style="margin-bottom: 0px;text-align: center;background-color: #FD295E;height: 25px;border-radius: 25px">
                   <span style="color: #f5f7fa;margin-top: 20px"> <i style="color: #f5f7fa"
                                                                     class="fa fa-exclamation-triangle">
                </i>{{errorMsg}}</span></h4>
                </div>

                <div class="login-box">


                    <div class="login_form">
                        <form action="#" name="loginform" accept-charset="utf-8" id="login_form"
                              class="loginForm" method="post"><input type="hidden" name="did" value="0"/>
                            <input type="hidden" name="to" value="log"/>
                            <div class="uinArea" id="uinArea">
                                <label class="input-tips" for="loginUserName">帐号：</label>
                                <div class="inputOuter" id="uArea">

                                    <input type="text" id="loginUserName" name="userid" class="inputstyle"
                                           v-model="user.username"
                                           placeholder="用户名"/>
                                </div>
                            </div>
                            <div class="pwdArea" id="pwdArea">
                                <label class="input-tips" for="loginPwd">密码：</label>
                                <div class="inputOuter" id="pArea">

                                    <input type="password" id="loginPwd" name="password" class="inputstyle"
                                           v-model="user.password"
                                           placeholder="密码"/>
                                </div>
                            </div>
                            <div class="pwdArea" id="idArea">
                                <label class="input-tips8" for="loginPwd">验证码:</label>
                                <div class="inputOuter" id="idaArea">

                                    <input type="text" id="loginid" name="userPwd" class="inputstyle"
                                           v-model="user.captcha" @keyup.enter="login"
                                           placeholder="请输入验证码"/>
                                </div>
                            </div>

                            <img style="margin-left: 45px" alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src"
                                 @click="refreshCode">
                            &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:" @click="refreshCode">点击刷新</a>

                            <div class="checkbox text-left">
                                <label><input type="checkbox" v-model="user.rememberMe" value="true" name="rememberMe">记住我</label>
                            </div>


                            <div style="padding-left:50px;margin-top:20px;"><input id="loginBtn" type="button"
                                                                                   value="登 录" @click="login"
                                                                                   style="width:150px;"
                                                                                   class="button_blue"/></div>

                        </form>
                    </div>

                </div>

            </div>
            <!--登录end-->
        </div>

        <!--注册-->
        <div class="qlogin" id="qlogin" style="display: none; ">

            <div class="web_login">
                <form name="form2" id="regUser" accept-charset="utf-8" action="#" method="post">
                    <input type="hidden" name="to" value="reg"/>
                    <input type="hidden" name="did" value="0"/>
                    <ul class="reg_form" id="reg-ul">
                        <div id="userCue" class="cue">注册请注意格式</div>
                        <li>

                            <label for="user" class="input-tips2">用户名：</label>
                            <div class="inputOuter2">
                                <input type="text" id="user" name="userid" maxlength="16" class="inputstyle2"
                                       v-model="users.username"
                                       placeholder="用户名"/>
                            </div>
                        </li>


                        <li>
                            <label for="passwd" class="input-tips2">密码：</label>
                            <div class="inputOuter2">
                                <input type="password" id="passwd" name="password" maxlength="16" class="inputstyle2"
                                       v-model="users.password"
                                       placeholder="密码"/>
                            </div>

                        </li>
                        <li>
                            <label for="passwd2" class="input-tips2">确认密码：</label>
                            <div class="inputOuter2">
                                <input type="password" id="passwd2" name="userpassword" maxlength="16"
                                       class="inputstyle2"
                                       placeholder="确认密码"/>
                            </div>

                        </li>

                        <li>
                            <label for="qq" class="input-tips2">邮箱：</label>
                            <div class="inputOuter2">

                                <input type="text" id="qq" name="email" class="inputstyle2"
                                       v-model="users.email"
                                       placeholder="邮箱"/>
                            </div>

                        </li>

                        <li>
                            <div class="inputArea">
                                <input type="button" id="reg" style="margin-top:10px;margin-left:85px;"
                                       class="button_blue"
                                       @click="register"
                                       value="注册"/> <a href="#" class="zcxy" target="_blank"></a>
                            </div>

                        </li>
                        <div class="cl"></div>
                    </ul>
                </form>


            </div>

        </div>
    </div>
    <!--注册end-->
</div>


</body>
<!--<script src="public/libs/jquery.min.js"></script>-->
<script src="public/libs/vue.min.js"></script>
<!--<script src="public/libs/bootstrap.min.js"></script>-->
<!--<script src="public/libs/jquery.slimscroll.min.js"></script>-->
<!--<script src="public/libs/fastclick.min.js"></script>-->
<!--<script src="public/libs/app.js"></script>-->
<script type="text/javascript">
    var vm = new Vue({
        el: '#rrapp',
        data: {
            user: {},
            users: {},
            error: false,
            errorMsg: '',
            src: '/sys/captcha.jpg'
        },
        beforeCreate: function () {
            if (self != top) {
                top.location.href = self.location.href;
            }
        },
        methods: {
            refreshCode: function () {
                this.src = "/sys/captcha.jpg?t=" + $.now();
            },
            login: function (event) {
                $.ajax({
                    type: "POST",
                    url: "/sys/login",
                    data: JSON.stringify(vm.user),
                    dataType: "json",
                    contentType: "application/json",
                    cache: false,
                    success: function (result) {
                        if (result.code === 0) {//登录成功
                            parent.location.href = 'index.html';
                        } else {
                            vm.error = true;
                            vm.errorMsg = result.msg;
                            vm.refreshCode();
                        }
                    }
                });
            },

            register: function (event) {
                var pwdmin = 6;
                if ($('#user').val() === "") {
                    $('#user').focus().css({
                        border: "1px solid red",
                        boxShadow: "0 0 2px red"
                    });
                    $('#userCue').html("<font color='red'><b>×用户名不能为空</b></font>");
                    return false;
                }

                if ($('#user').val().length < 4 || $('#user').val().length > 16) {

                    $('#user').focus().css({
                        border: "1px solid red",
                        boxShadow: "0 0 2px red"
                    });
                    $('#userCue').html("<font color='red'><b>×用户名位4-16字符</b></font>");
                    return false;

                }

                if ($('#passwd').val().length < pwdmin) {
                    $('#passwd').focus();
                    $('#userCue').html("<font color='red'><b>×密码不能小于" + pwdmin + "位</b></font>");
                    return false;
                }
                if ($('#passwd2').val() != $('#passwd').val()) {
                    $('#passwd2').focus();
                    $('#userCue').html("<font color='red'><b>×两次密码不一致！</b></font>");
                    return false;
                }

                var sqq = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/;
                if (!sqq.test($("#qq").val())) {
                    $('#qq').focus().css({
                        border: "1px solid red",
                        boxShadow: "0 0 2px red"
                    });
                    $('#userCue').html("<font color='red'><b>×邮箱格式不正确</b></font>");
                    return false;
                } else {
                    $('#qq').css({
                        border: "1px solid #D7D7D7",
                        boxShadow: "none"
                    });
                    $.ajax({
                        type: "POST",
                        url: "/sys/do_register",
                        data: JSON.stringify(vm.users),
                        dataType: "json",
                        contentType: "application/json",
                        cache: false,
                        success: function (result) {
                            if (result.code === 0) {//注册成功
                                alert("注册成功,欢迎登录");
                                parent.location.href = 'login.html';
                            } else {
                                vm.error = true;
                                vm.errorMsg = result.msg;
                                vm.register();
                            }
                        }
                    });
                }

            }
        }
    });
</script>
<script>
    $(document).ready(function () {
        // $("#loginBtn").click(function () {
        //     var password = $("#loginPwd").val();
        //     //加密
        //     var str = salt.charAt(6) + salt.charAt(0) + password + salt.charAt(1);
        //     var newPwd = $.md5(str);
        //     //加密后的字符串重新赋值给元素标签
        //     $("#loginPwd").val(newPwd);
        //
        //     $.ajax({
        //         url: "/user/do_login",
        //         data: {userName: $("#loginUserName").val(), userPwd: $("#loginPwd").val()},
        //         success: function (data) {
        //             if (data == true) {
        //                 window.location.href = "index.html";
        //             } else {
        //                 //$("#loginEr").html("用户名或密码错误");
        //                 alert("用户名或密码错误");
        //             }
        //         }
        //     });
        // });

        $("#user").blur(function () {
            //获取输入的值，发送到服务器中做查询
            var userid = $(this).val();
            if (userid == null || userid === "") {
                $('#userCue').html("<font color='red'><b>×用户名不能为空</b></font>");
            }else {
                $.ajax({
                    url: "/sys/do_checkUserName",
                    data: {userid: userid},
                    type: "post",
                    success: function (result) {
                        //数据解析
                        // alert(result);
                        if (result) {
                            $("#userCue").html("<b style='color: red'>x用户名已被注册</b>");

                        } else {
                            $("#userCue").html("<font color='red'><b>用户名可用</b></font>");
                        }
                    }
                });
            }
        });

    });


</script>
</html>